<template>
	<view :class="mode">
		<view :class="mode=='pc'?'py-12':'p-2'">
			<view class="mx-auto rounded-md" :class="mode=='pc'?'max-w-1200 p-6':'p-2'">
				<view class="flex rounded-3xl overflow-hidden w-full" :style="mode=='pc'?'height: 560px;':'' ">
					<image src="/static/home/login-banner.png" style="width: 55%;height: 100%;" v-if="mode=='pc'">
					</image>
					<view class="flex-1 bg-white p-8">
						<view class="text-2xl text-black__70 font-bold " :class="mode=='pc'?'mt-12 mb-12':'my-4' ">用户注册</view>
						<el-form :model="form" label-width="auto" :rules="rules" size="large">
							<el-form-item label="" prop="username">
								<el-input v-model="form.username" style="width: 100%;" placeholder="请填写账号"/>
							</el-form-item>
							<el-form-item label="" prop="password">
								<el-input v-model="form.password" type="password" style="width: 100%;" placeholder="密码" show-password/>
							</el-form-item>
							<el-form-item label="" prop="confirmPassword">
								<el-input v-model="form.confirmPassword" type="password" style="width: 100%;" placeholder="确认密码" show-password/>
							</el-form-item>
							
							<el-form-item label="" prop="code">
								<div class="flex w-full">
									<view class="w-full" ><el-input class="w-full" v-model='form.code' placeholder='请输入图形验证码'/></view>
									<div @click="refreshCode" class="cursor-pointer">
										<image :src="form.image" style="width: 200rpx;height: 78rpx;margin:2px 0 0 10rpx;"></image>
									</div>
								</div>
							</el-form-item>
							<view class="w-full">
								<el-button type="primary" size="large" style="width: 100%;" @click="onSubmit">注册</el-button>
								<!-- <view class="flex justify-between py-4 text-sm" style="color: #597EF7;">
									<view>忘记密码</view>
									<view>注册账号</view>
								</view> -->
							</view>
						</el-form>
						
					</view>
				</view>

			</view>
		</view>



		<footerPage></footerPage>
		<tabBar v-if="mode=='app'"></tabBar>
		<appMeum v-if="mode=='app'"></appMeum>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				form:{
					username:'',
					password:'',
					confirmPassword:'',
					code:'',
					image:'',
					uuid:'',
					clientId: "ZdfPlQ1bRKEgpAnCjry6kyJDVnxqRP0tK", 
					grantType: "saasWapPad", 
				},
				rules:{
					username: [{ required: true,message: '必填项',trigger: 'blur'}],
					password: [{ required: true,message: '必填项',trigger: 'blur'}],
					code: [{ required: true,message: '必填项',trigger: 'blur'}],
				}
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		mounted() {
			// 刷新图形
			this.refreshCode()
		},
		methods: {
			// 提交
			onSubmit(){
				let req = {
					...this.form
				}
				delete req.image
				uni.$http.post('/saasWapAuth/register',req).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '注册成功'
						});
						uni.navigateTo({
							url: '/pages/login/login',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}else{
						// 刷新图形
						this.refreshCode()
					}
				})
			},
			// 刷新图形
			refreshCode(){
				uni.$http.get('/auth/code', {}).then(res => {
					if (res.code == 200&&res.data) {
						this.form.image = 'data:image/jpeg;base64,'+res.data.img
						this.form.uuid = res.data.uuid
					}
				})
			},
			// 生成随机验证码
			makeCode(o, l){
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
					]
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.pc {
		background: url('/static/home/lg.png');
		background-size: 100% 100%;
	}

	.app {
		width: 100%;
		padding-bottom: 120rpx;
		background: url('/static/home/lg.png');
		background-size: 100% 100%;
	}
</style>